﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="UserControl_Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
        language="javascript" charset="gb2312"></script>

    <style type="text/css">
        .tab
        {
            background-color: #FAFAFA;
            margin: 5px 8px;
            padding: 5px 10px;
        }
        .tab p span
        {
            background-color: #EFEFEF;
            border: 1px solid #CCCCCC;
            cursor: pointer;
            margin-right: 6px;
            padding: 2px 5px;
        }
        .tab p span.current
        {
            background-color: #FAFAFA;
            border-bottom-color: #fafafa;
        }
        .tab p
        {
            border-bottom: 1px solid #CCCCCC;
            font-weight: bold;
            padding: 0 10px 2px;
        }
        .tab li
        {
            border-bottom: 1px dotted #CCCCCC;
            padding-bottom: 3px;
            margin: 5px 0;
        }
        .tab .mhot, .tab.allhot
        {
            display: none;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            $(".tab span:first").addClass("current"); //为第一个SPAN添加当前效果样式
            $(".tab div:not(:first)").hide(); //隐藏其它的UL
            $(".tab span").click(function() {
                $(".tab span").removeClass("current"); //去掉所有SPAN的样式
                $(this).addClass("current");
                $(".tab div").hide();
                $("." + $(this).attr("id")).fadeIn('normal');
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div class="tab">
        <p>
            <span id="tab1">tab1</span> <span id="tab2">tab2</span> <span id="tab3">tab3</span></p>
        <div class="tab1">
            <div>
                <asp:TreeView ID="tvContactsGroup" runat="server" ImageSet="Arrows" ShowLines="True">
                    <ParentNodeStyle Font-Bold="False" />
                    <HoverNodeStyle Font-Underline="False" ForeColor="#5555DD" />
                    <SelectedNodeStyle Font-Underline="False" HorizontalPadding="0px" VerticalPadding="0px"
                        ForeColor="#5555DD" Font-Bold="true" />
                    <RootNodeStyle ForeColor="Blue" />
                    <NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" HorizontalPadding="5px"
                        NodeSpacing="0px" VerticalPadding="0px" />
                </asp:TreeView>
            </div>
        </div>
        <div class="tab2">
            一花一世办一草一天堂</div>
        <div class="tab3">
            哈哈</div>
    </div>
    </form>
</body>
</html>
